<template>
  <view class="cm-scroll-bar cm-text-14 cm-text-center"
    :class="[cmClass]" :style="[cmStyle]">
    <scroll-view class="cm-scroll-bar-scroller" :style="[style]"
      :scroll-left="scrollLeft"
      scroll-x scroll-with-animation>
      <view class="cm-scroll-bar-wrapper">
        <view class="cm-scroll-bar-item" v-for="(item, index) in list" :key="item.id" :id="'item-' + item.id"
          :class="[ selectedIndex === index ? 'active' : '' ]"
          @click="clickHandler(index)">
          {{ item.text }}
        </view>      
      </view>
    </scroll-view>    
  </view>
</template>

<script src="./cm-scroll-bar.js"></script>

<style lang="stylus">
@import './cm-scroll-bar.styl'
</style>
